<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col group">
			<view class="fun-flex-col fun-items-center image_5">
				<text class="font text_3">Total Balance</text>
				<view class="money">
					<text class="text_4">{{investInfo.amountValue}}</text>
					<text class="font_2">USD</text>
				</view>
				
				<view class="fun-flex-row equal-division fun-justify-between">
					<view class="fun-flex-col fun-items-center equal-division-item group_2">
						<text class="font_3 text_5">Investments</text>
						<text class="font text_6 mt-8">{{investInfo.investValue}}</text>
					</view>
					
					<view class="fun-flex-col fun-items-center equal-division-item group_2">
						<text class="font_3 text_5">Available Amount</text>
						<text class="font text_6 mt-8">{{walletInfo.balance}}</text>
					</view>
					
					<view class="fun-flex-col fun-items-center equal-division-item group_2">
						<text class="font_3 text_5">In Withdrawals</text>
						<text class="font text_6 mt-8">{{walletInfo.withdrawaling}}</text>
					</view>
				</view>
			</view>

			<text class="fun-self-start text_7">My Investment Accounts</text>
			<view class="fun-relative group_3 ">
				<view class="fun-flex-col list-item mt-12" @click="toDetail('fixed')">
					<view class="fun-flex-row fun-justify-between">
						<text class="font_4 text_8">Fixed Income Account</text>
						<view class="fun-flex-row fun-items-center group_4">
							<text class="font_5 text_9">ALL</text>
							<image class="image_7 ml-3" src="@/static/common/more.png" />
						</view>
					</view>
					<view class="fun-flex-row fun-justify-between group_5">
						<text class="font_6 text_10">Principal</text>
						<text class="font_7 text_11">${{fixInfo.positionAmount+fixInfo.buyingAmount}}</text>
					</view>
					<view class="fun-flex-row fun-justify-between fun-items-center group_6">
						<text class="font_6">Cumulative Return</text>
						<text class="font_8" :class='fixInfo.countprofit < 0 ? "fall-text" : "rise-text"'>${{fixInfo.countprofit}}</text>
					</view>
					<view class="fun-flex-row fun-justify-between fun-items-center group_7">
						<text class="font_6 text_13">Annualized Return</text>
						<text class="font_8" :class='fixInfo.yearRate < 0 ? "fall-text" : "rise-text"'>{{fixInfo.yearRate}}%(Last 24H)</text>
					</view>
				</view>
				
				<view class="fun-flex-col list-item mt-12" @click="toDetail('holding')">
					<view class="fun-flex-row fun-justify-between">
						<text class="font_4 text_8">Holding Products</text>
						<view class="fun-flex-row fun-items-center group_4">
							<text class="font_5 text_9">ALL</text>
							<image class="image_7 ml-3" src="@/static/common/more.png" />
						</view>
					</view>
					<view class="fun-flex-row fun-justify-between group_5">
						<text class="font_6 text_10">Principal</text>
						<text class="font_7 text_11">${{investInfo.productAmount}}</text>
					</view>
					<view class="fun-flex-row fun-justify-between fun-items-center group_6">
						<text class="font_6">Pre-fee Value</text>
						<text class="font_8">${{investInfo.productValue}}</text>
					</view>
					<view class="fun-flex-row fun-justify-between fun-items-center group_7">
						<text class="font_6 text_13">Cumulative Return</text>
						<text class="font_8" :class='investInfo.productTotalProfit < 0 ? "fall-text" : "rise-text"'>-{{investInfo.productTotalProfit}}%(Last 24H)</text>
					</view>
				</view>
				
				<view class="fun-flex-col list-item mt-12" @click="toDetail('completed')">
					<view class="fun-flex-row fun-justify-between">
						<text class="font_4 text_8">Completed Products</text>
						<view class="fun-flex-row fun-items-center group_4">
							<text class="font_5 text_9">ALL</text>
							<image class="fun-shrink-0 image_7 ml-3" src="@/static/common/more.png" />
						</view>
					</view>
					<view class="fun-flex-row fun-justify-between fun-items-center group_6">
						<text class="font_6">Pre-Fee Return</text>
						<view>
							<text class="font_8" :class='(investInfo.productTotalProfitFee + investInfo.productTotalFee) < 0 ? "fall-text" : "rise-text"'>${{investInfo.productTotalProfitFee + investInfo.productTotalFee}}</text>
							<text class="font_8 rise-text">(+${{calculatePercentage((fixInfo.productTotalProfitFee + fixInfo.productTotalFee),fixInfo.productTotalAmount)}})</text>
						</view>
					</view>
					<view class="fun-flex-row fun-justify-between fun-items-center group_7">
						<text class="font_6 text_13">Post-Fee Return</text>
						<view>
							<text class="font_8" :class='investInfo.productValue < 0 ? "fall-text" : "rise-text"'>-{{investInfo.productValue}}</text>
							<text class="font_8 rise-text">(+${{calculatePercentage(fixInfo.productTotalProfitFee,fixInfo.productTotalAmount)}})</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {wallet} from "@/api/account.js"
	import {invest,fixedOrder} from "@/api/home.js"
	import {calculatePercentage} from "@/common/js/func.js"
	
	export default {
		data() {
			return {
				walletInfo:{},
				investInfo:{},
				fixInfo:{},
				calculatePercentage
			};
		},
		onLoad() {
			this.getWalletInfo()
			this.getInvestInfo()
			this.getFixedOrder()
		},
		methods: {
			getFixedOrder(){
				fixedOrder().then(res => {
					if(res.code == 0){
						this.fixInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			getInvestInfo(){
				invest().then(res => {
					if(res.code == 0){
						this.investInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			getWalletInfo(){
				wallet().then(res => {
					if(res.code == 0){
						this.walletInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			toDetail(type){
				if(type == "fixed"){
					uni.navigateTo({url:'/pages/home/fixedIncome'})
				}
				else if(type == "holding"){
					uni.navigateTo({url:'/pages/home/holding'})
				}
				else if(type == "completed"){
					uni.navigateTo({url:'/pages/home/finished'})
				}
				
			},
		},
	};
</script>

<style scoped lang="scss">
	.mt-12 {
		margin-top: 24rpx;
	}
	.ml-3 {
		margin-left: 6rpx;
	}
	.mt-8 {
		margin-top: 16rpx;
	}
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.group {
			padding: 32rpx 32rpx 60rpx;
			.image_5 {
				width: 100%;
				background: url("@/static/home/invest_bg.png") no-repeat center;
				background-size: 100% 100%;
				padding: 14px 12px;
			}

			.text_3 {
				font-weight: 600;
			}
			.equal-division {
				width: 100%;
				.group_2 {
					.font_3 {
						font-size: 24rpx;
						font-family: SF Pro Display;
						color: #333333;
					}
				}
			}
			
			.money{
				margin-top: 20rpx;
				margin-bottom: 32rpx;
				.text_4 {
					color: #000000;
					font-size: 48rpx;
					font-family: SF Pro Display;
					font-weight: bold
				}
				
				.font_2 {
					margin-left: 16rpx;
					font-size: 28rpx;
					font-family: SF Pro Display;
					color: #7f7f7f;
				}
			}
			

			.text_7 {
				margin-top: 24rpx;
				color: #333333;
				font-size: 32rpx;
				font-family: SF Pro Display;
				font-weight: bold
			}

			.group_3 {
				margin-top: 24rpx;
				.list-item {
					padding: 24rpx;
					background-color: #ffffff;
					border-radius: 16rpx;
					border: solid 2rpx #f0f0f0;
					&:first-child {
						margin-top: 0;
					}
					.font_4 {
						font-size: 28rpx;
						font-family: SF Pro Display;
						font-weight: 700;
						color: #000000;
					}
					.group_4 {
						.image_7 {
							width: 24rpx;
							height: 24rpx;
						}
					}

					.group_5 {
						margin-top: 32rpx;
						.font_7 {
							font-size: 28rpx;
							font-family: SF Pro Display;
							color: #525252;
						}
					}
					.font_6 {
						font-size: 28rpx;
						font-family: SF Pro Display;
						color: #7f7f7f;
					}

					.group_6 {
						margin-top: 16rpx;
					}

					.group_7 {
						margin-top: 16rpx;
					}

					.font_8 {
						font-size: 28rpx;
						font-family: SF Pro Display;
						color: #51844d;
					}
				}
			}
		}

		.font {
			font-size: 32rpx;
			font-family: SF Pro Display;
			font-weight: 700;
			color: #000000;
		}

		.font_5 {
			font-size: 24rpx;
			font-family: SF Pro Display;
			color: #7f7f7f;
		}
	}
</style>